<!-- 
    对外接口：function show_modal(plan_id, plan_name)，显示模态框
-->
{% macro plan_detail() %}

<div class="doing_task row list-group-item" style="margin-top: 2px; background-color:rgb(250, 250, 250);">
    <div class="row">
        <div class="col-6">
            <h5 style="color:green;">
                <small>#<span class="id">0</span></small>
                <span class="name">睡大觉</span>&nbsp;
                <small><span class="need_minute">50</span>m</small>
            </h5>
        </div>
        <div style="color:white; margin-left:auto;">
            <a class="start btn btn-success btn" role="button">开始</a>
            <a class="submit btn btn-info btn" role="button">提交</a>
            <a class="delete btn btn-danger btn" role="button">删除</a>
        </div>
    </div>
</div>


<div class="dossier row list-group-item" style="margin-top: 2px; background-color:rgb(250, 250, 250);">
    <div class="row">
        <div class="col-6">
            <h5 style="color:rgb(156, 126, 29)">
                <span class="name">睡大觉</span>&nbsp;
            </h5>
        </div>
        <div style=" margin-left:auto; margin-right: 5rem;">
            <small><span>提交:</span></small>
            <span class="count" style="color:rgb(156, 126, 29);">100</span>
            <small>次</small>
            &nbsp;&nbsp;
            <small>合计:</small>
            <span class="hour" style="color: rgb(156, 126, 29);">24</span>
            <small>h</small>
        </div> 
    </div>
</div>


<form class="task_form" action="">
    <!-- 备注：用宏应该比这样复制过去更简单 -->
    <div class="from-group">
        <label>任务名</label>
        <input type="text" id="name" class="name form-control" name="name">
    </div>
    <div class="from-group">
        <label>用时(m)</label>
        <input type="text" id="need_minute" class="need_minute form-control" name="need_minute">
    </div>
    <a onclick="submit_form()" class="btn btn-primary" href="#">保存</a>
</form>


<div class="modal fade my-modal" id="recordModal" tabindex="-1" role="dialog" aria-labelledby="tagModalLabel" aria-hidden="true">
    <!-- 备注：模态框和任务列表都重复使用，做成组件？ -->
    <div class="modal-dialog modal-dialog-centered modal-lg my-modal" role="document">
        <div class="modal-content">
            <!-- a 顶栏 -->
            <div class="modal-header">
                <h5 class="modal-title" id="tagModalLabel">Modal title</h5>&nbsp;&nbsp;
                <a onclick="create_form(this)" class="btn btn-success btn-sm" role="button" href="#">+新建</a>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <!-- b 模态框正文 -->
            <div class="modal-body" id="modalBody">
                <div id="form_div"></div>
                <!-- 1 待做任务列表 -->
                <div id="doing_list">
                </div>
                <!-- 1.2  完成归档列表 -->
                <div id="dossier_list">
                </div>
                <!-- 2 完成记录 -->
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th scope="col">No.</th>
                            <th scope="col">name</th>
                            <th scope="col">time</th>
                            <th scope="col">hour</th>
                            <th scope="col">describe</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 异步请求填充 -->
                    </tbody>
                </table>
            </div>
            <!-- c 底栏 -->
            <div class="modal-footer"></div>
        </div>
    </div>
</div>


<script>
    // 备注：有点儿麻烦，加一个dossier，隐藏克隆块、模态框隐藏的代码也都要改

    $('.doing_task').eq(0).css('display', 'none');
    $('.dossier').eq(0).css('display', 'none');
    $('.task_form').eq(0).css('display', 'none');
    // 模态框显示 记录列表
    var current_plan_id = 0;
    var current_plan_name = 'null';
    function append_doing(task){
        var t = $('.doing_task').eq(0).clone();
        t.css('display', 'block');
        t.find('.id').eq(0).text(task.id);
        t.find('.name').eq(0).text(task.name);
        t.find('.need_minute').eq(0).text(task.need_minute);

        t.find('.start').eq(0).attr('href', `${routes.task_clock}/${task.id}`);
        t.find('.submit').eq(0).attr('href', `${routes.task_submit}/${task.id}?next={{ request.endpoint }}`);
        t.find('.delete').eq(0).attr('href', `${routes.task_delete}/${task.id}`);
        $('#doing_list').append(t);
    }
    function append_dossier(d, id){
        var t = $('.dossier').eq(0).clone();
        t.css('display', 'block');
        t.find('.name').eq(0).text(d.name);
        t.find('.count').eq(0).text(d.count);
        t.find('.hour').eq(0).text(d.hour);

        $('#dossier_list').append(t);
    }
    function show_modal(plan_id, plan_name) {
        // 用于submit_form之后刷新模态框
        current_plan_id = plan_id;
        current_plan_name = plan_name;

        console.log(plan_id)
        var modal = $('#recordModal')
        modal.modal('show')
        modal.find('.modal-title').text(plan_name)

        $.ajax({
            url: `${routes.plan_record}/${plan_id}`,
            type: 'GET',
            success: function (res) {
                // 填入done
                for (var i = 0; i < res.done.length; i++) {
                    var task = res.done[i];
                    var row =
                        `<tr>` +
                        `<td scope="row">${task.id}</td>` +
                        `<td class="name">${task.name}</td>` +
                        `<td><small>${task.time_finish}</small></td>` +
                        `<td>${task.hour}</td>` +
                        `<td class="describe"><small>${task.describe}</small></td>` +
                        `</tr>`
                    modal.find('tbody').append(row);
                }
                // 填入doing
                console.log(res.doing);
                for (var i = 0; i < res.doing.length; i++) {
                    var task = res.doing[i];
                    append_doing(task);
                }
                // 填入归档 - 想只对结束后的计划显示，又好像不太方便。
                console.log(res.dossier);
                if (res.doing.length == 0) {
                    for (var i = 0; i < res.dossier.length; i++) {
                        var d = res.dossier[i];
                        append_dossier(d, i);
                    }
                }
            },
        });
    }
    
    // 模态框隐藏 清空内容
    var btn_count = 0;
    $('#recordModal').on('hidden.bs.modal', function (e) {
        $('form input').val('');
        var modal = $('#recordModal');
        modal.find('tbody').empty();  // 清空子标签
        modal.find('#doing_list').empty();
        modal.find('#dossier_list').empty();
        modal.find('#form_div').empty();

        modal.find('a').text('+新增'); // 重置按钮状态，否则可能下次打开又是“收起”
        btn_count = 0;
    });
    
    // 新建任务
    function create_form(btn) {
        var s = ['+新增', '收起'];
        if (btn_count % 2 == 0) {
            var t = $('.task_form').eq(0).clone();
            t.css('display', 'block');
            $('#form_div').append(t);
        }
        else {
            $('#form_div').empty();
        }
        btn_count += 1;
        $(btn).text(s[btn_count % 2]);
    }
    
    // 提交表单
    function submit_form() {
        var modal = $('#recordModal');
        var data = {};

        data.name = modal.find('.name').eq(0).val();
        data.need_minute = modal.find('.need_minute').eq(0).val();
        data.plan_id = current_plan_id;
        
        $.ajax({
            url: "{{ url_for('task.task_create_ajax') }}",
            type: 'POST',
            contentType: 'application/json; charset=utf-8', 
            dataType: 'json', // 如果你期望服务器返回JSON数据 
            data: JSON.stringify(data),
            success: function (task) {
                append_doing(task);
                modal.find('#form_div').empty();
                var t = $('.task_form').eq(0).clone();
                t.css('display', 'block');
                $('#form_div').append(t);
            }
        })
    };
</script>
{% endmacro %}
